<template>
	<div class="dashboard-container">
		<div class="shouye-t" style="margin-top: 5px;">
			<span style="color:#FF5722">{{name}}</span>
			<p>CATCH ON 管理平台欢迎您！ {{ new Date() | dateformat }}</p>
		</div>
		<fieldset>
			<legend>财务统计汇总</legend>
			<div>
				<table>
					<tbody>
						<tr>
							<td>累积充值积分:
								<span class="blue">{{ list.rechargeSum == null ? 0 : list.rechargeSum }}</span>
							</td>
							<td>累积消费积分:
								<span class="blue">{{ list.incomeSum == null ? 0 : list.incomeSum }}</span>
							</td>
							<td>累积转赠积分:
								<span class="blue">{{ list.sendNum == null ? 0 : list.sendNum }}</span>
							</td>
							<td>累积提币USDT:
								<span class="blue">{{ list.usdtNum == null ? 0 : list.usdtNum }}</span>
							</td>
						</tr>
						<tr>
							<td>累积分享奖励:
								<span class="blue">{{ list.nodeSum == null ? 0 : list.nodeSum }}</span>
							</td>
							<td>累积间接分享奖励:
								<span class="blue">{{ list.netSum == null ? 0 : list.netSum }}</span>
							</td>
							<td>累积发放奖池:
								<span class="blue">{{ list.poolNum == null ? 0 : list.poolNum }}</span>
							</td>
							<td>累积销售产品:
								<span class="blue">{{ list.orderNum == null ? 0 : list.orderNum }}</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<!-- <img src="../../assets/images/index1.jpg" alt=""> -->
		<fieldset>
			<legend>近七天统计</legend>
			<div>
				<div id="main" style="width: 85%;height:500px;padding-top: 20px;"></div>
			</div>
		</fieldset>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: localStorage.getItem('name'),
				list: [], // 汇总数据
				tjlist: [], // 近七天数据
				allDate: [], // 近七天日期
				btcIncomeSum: [],
				ethIncomeSum: [],
				send:[],
				usdt:[],
				orderNumber:[],
				rechargeSum: [],
				incomeSum: [],
				nodeSum: [],
				netSum: []
			}
		},
		methods: {
			drawLine() {
				var myChart = this.$echarts.init(document.getElementById('main'))
				myChart.setOption({
					title: {
						text: ''
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: [
							'累积转赠积分',
							'累积提币USDT',
							'累积销售产品',
							'累积充值积分',
							'累积消费积分',
							'累积分享奖励',
							'累积间接分享奖励',
						],
						left: '20px'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.allDate
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '累积转赠积分',
							type: 'line',
							data: this.send
						},
						{
							name: '累积提币USDT',
							type: 'line',
							data: this.usdt
						},
						{
							name: '累积销售产品',
							type: 'line',
							data: this.orderNum
						},
						{
							name: '累积充值积分',
							type: 'line',
							data: this.rechargeSum
						},
						{
							name: '累积消费积分',
							type: 'line',
							data: this.incomeSum
						},
						{
							name: '累积分享奖励',
							type: 'line',
							data: this.nodeSum
						},
						{
							name: '累积间接分享奖励',
							type: 'line',
							data: this.netSum
						}
					]
				})
			},
			getList() {
				let token = localStorage.getItem('mytoken');
				this.axios.get('index/financial/statistics', {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.list = res.data.data.data;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getData() {
				let token = localStorage.getItem('mytoken');
				this.axios.get('index/recent/statistic', {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.tjlist = res.data.data.data;
						for(let i = 0; i < this.tjlist.length; i++) {
							this.allDate.push(this.tjlist[i].allDate);
							this.send.push(this.tjlist[i].send);
							this.usdt.push(this.tjlist[i].usdt);
							this.orderNumber.push(this.tjlist[i].orderNumber);
							this.rechargeSum.push(this.tjlist[i].rechargeSum);
							this.incomeSum.push(this.tjlist[i].incomeSum);
							this.nodeSum.push(this.tjlist[i].nodeSum);
							this.netSum.push(this.tjlist[i].netSum);
						}
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message);
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			}
		},
		created() {
			this.getList();
			this.getData();
			setTimeout(() => {
				this.drawLine();
			}, 1000)
		},
		mounted() {
			this.$Message.config({
				top: 250
			})
		}
	}
</script>

<style>
	.shouye-t {
		margin-bottom: 10px;
		padding: 15px;
		line-height: 22px;
		border-left: 5px solid #2db7f5;
		border-radius: 0 2px 2px 0;
		background-color: #e9eaec;
	}
</style>